<template>
  <div class="head_box">
    <!--    头部顶部灰色盒子-->
    <div class="top_head item_center">
      <div class="box_size">
        <head-top></head-top>
      </div>
    </div>
    <!--    头部中部logo和搜索框图-->
    <div style="padding: 10px" class="item_center">
      <div class="box_size">
        <el-row>
          <el-col :offset="3" :span="2">
            <el-image :src="require('@/assets/website_logo.png')"></el-image>
          </el-col>
          <el-col :offset="2" :span="10">
            <div style="padding-top: 30px">
              <div style="display: flex;justify-content: start">
                <div style="flex: 5">
                  <el-form ref="inputRef" :model="searchForm" :rules="rules">
                    <el-form-item prop="searchText">
                      <el-input type="text" v-model="searchForm.searchText"
                                placeholder="请输入关键字"/>
                    </el-form-item>
                  </el-form>
                </div>
                <div class="search_button" @click="search(inputRef)">
                  <Search style="color: white"/>
                  <span style="color: white">搜索</span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :offset="2" :span="3" class="item_column_center">
            <el-image :src="require('@/assets/palm_mall.png')"></el-image>
          </el-col>
        </el-row>
      </div>
    </div>
    <!--    头部底部导航栏-->
    <div class="navigation_class item_center">
      <el-row class="nav_one" gutter="40">
        <el-col :span="4" :xs="12" style="background-color: #1DAEEE">
          <div style="margin-top: 10px;display: flex;justify-content: space-between">
            {{ props.menuTitle }}
            <el-icon>
              <Expand/>
            </el-icon>
          </div>
        </el-col>
        <el-col :span="3" :xs="0"></el-col>
        <el-col v-for="item in list" :key="item.id" span="1" :class="activeRoute===item.path ? 'active_nav' : 'ac'"
                :xs="0">
          <div style="margin-top: 10px">
            <router-link class="nav_text" :to="item.path">{{ item.label }}</router-link>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup>
import {ElMessage, ElMessageBox} from 'element-plus'
import {useRoute, useRouter} from 'vue-router'
import {useCommonStore} from "@/store";
import {storeToRefs} from 'pinia'
import {onMounted, reactive, ref, watch} from "vue";
import {getMyInfoApi, logoutApi} from "@/api/user";
import HeadTop from "@/components/home/HeadTop";

let router = useRouter()
let props = defineProps(['menuTitle'])
let store = useCommonStore()
let {isLogin} = storeToRefs(store)
let userInfoData = ref({})
let inputRef = ref()
let searchForm = reactive({
  searchText: ''
})

function openLogin() {
  router.push('/login')
}

function gotoCart() {
  router.push('/person/person-cart')
}

function getUserInfo() {
  /*获取登录人信息*/
  getMyInfoApi().then(res => {
    userInfoData.value = res.data
  })
}

function goToEnroll() {
  router.push('/login')
}

function toPerson() {
  router.push('/person')
}

function search(r) {
  r.validate((v) => {
    if (v) {
      router.push({
        path: "/home/commodity-search",
        query: {
          searchValue: searchForm.searchText
        }
      })
    }
    return false
  })
}

const rules = {
  searchText: [
    {required: true, message: '请输入关键字', trigger: 'change'},
    {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'change'}
  ],
}

/**
 * 弹出警告框，退出登录
 */
function openLogout() {
  ElMessageBox.confirm(
      '你确定要退出登录吗？',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        logoutApi()
        store.setLoginState(false)
        router.push('/home')
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消成功!',
        })
      })
}

onMounted(() => {
  if (isLogin.value) {
    getUserInfo()
  }
})
let route = useRoute()
let activeRoute = ref(route.path)
let list = reactive([
  {
    id: '1',
    label: "首页",
    path: '/home/index'
  },
  {
    id: '001',
    label: '二手市场',
    path: '/home/second'
  },
  {
    id: '002',
    label: '交友大厅',
    path: '/home/friend'
  },
  {
    id: '003',
    path: '/square',
    label: '广场'
  },
  {
    id: '004',
    path: '/',
    label: '闪购'
  },
  {
    id: '005',
    label: '秒杀',
    path: "/flashSale"
  },
  {
    id: '006',
    label: '其他',
    path: "/home/other"
  },
])
watch(() => route.path, () => {
  activeRoute.value = route.path
})
</script>
<style scoped>

.box_size {
  width: 1200px;
}

.item_center {
  display: flex;
  justify-content: center;
}

.top_head {
  background-color: #d3dce6;
  padding: 1px;
}

.item_column_center {
  display: flex;
  align-items: center;
}

.navigation_class {
  height: 40px;
  background-color: #098CC0;
}

.search_button {
  height: 22px;
  flex: 1;
  background-color: #288FC7;
  display: flex;
  justify-content: center;
  padding: 5px;
}

.search_button:hover {
  background-color: #1DAEEE;
}

.nav_one {
  width: 1200px;
}

.active_nav {
  background-color: #1daeee;
}

.nav_text {
  text-decoration: none;
}

.ac:hover {
  background-color: #1daeee;
}
</style>
